<template>
  <a-modal
    title="分诊"
    width="680px"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="submit"
    :bodyStyle="{padding:'12px 24px 0'}"
    @cancel="handleCancel"
  >
    <a-spin :spinning="spinning" >
      <div class="row-wrapper" style="margin-bottom:5px">
        <!-- <div class="title" style="margin-bottom:2px">客户信息</div> -->
        <a-row :gutter="12">
          <a-col :md="12" :sm="24" >客户姓名：{{row_record.name}}</a-col>
          <a-col :md="12" :sm="24" >客户卡号：{{row_record.cardNo}}</a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24" >所属咨询：{{row_record.belConsultManId||"-"}}</a-col>
          <a-col :md="12" :sm="24" >开发人员：{{row_record.developerid||"-"}}</a-col>
        </a-row>
      </div>

      <div class="row-wrapper" style="margin-bottom: 5px;">
        <!-- <div class="title" style="margin-bottom:2px">选择客户诉求</div> -->
        <a-row :gutter="12" >
          <a-col :span="24">
            <a-form :form="form" layout="inline" labelAlign="left" >
              <a-form-item
                label="选择客户诉求"
                has-feedback
              >
                 <a-cascader
                      style="width:250px"
                      allow-clear        
                      expand-trigger="hover"
                      :show-search="{ filter }"
                      :options="ConsultationAppeal"
                      v-model="testArr"
                      placeholder="可选择,搜索"
                  />
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>

      <div class="row-wrapper" style="margin-bottom:5px">
        <!-- <div class="title" style="margin-bottom:2px">选择咨询师</div> -->
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout="inline" labelAlign="left" >
              <a-form-item
                label="选择咨询师"
               
              >
                <!-- v-decorator="['consultManId', { rules: [{ required: true, message: '请输入选择咨询师！' }]}]" -->
                <!--  v-model="consultManId" -->
                <a-select
                  allow-clear
                  :showSearch="true"
                  option-filter-prop="children"
                  option-label-prop="label"
                  style="width:170px;"
                  placeholder="咨询师，可搜索"          
                  v-decorator="['consultManId', { rules: [{ required: true, message: '请输入选择咨询师！' }]}]"
                >
                  <a-select-option v-for="item in sysUserArr" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="12" :sm="24" >
            <a-form :form="form" layout="inline" labelAlign="left" >            
              <a-form-item
                 label="选择咨询助理"    
                      
              >
                <a-select
                  allow-clear
                  :showSearch="true"
                  option-filter-prop="children"
                  option-label-prop="label"
                  style="width:170px;"
                  placeholder="咨询助理，可搜索"
                  v-decorator="['consultAssistantId', { rules: [{ required: false, message: '请选择咨询助理！' }]}]"
                >
                  <a-select-option v-for="item in sysUserArrAssistant" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>

      <div class="row-wrapper">
        <!-- <div class="title" style="margin-bottom:5px">分诊备注信息</div> -->
        <a-row :gutter="12">
          <a-col :md="24" :sm="24" >
            <a-form :form="form" layout='vertical'>
              <a-form-item
                :wrapperCol="wrapperCol"
                
                style="margin-bottom:5px"
              >
                <a-textarea
                  :rows="4"
                  placeholder="请填写备注信息"
                  :maxLength="100"
                  v-decorator="['remark', {rules: [{ required: false, message: '请填写备注信息！' }]}]"
                >
                </a-textarea>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
    </a-spin>

  </a-modal>
</template>

<script>
import {receiveItem,triageAdd,dictTypeListForCode,getZXS} from '@/api/modular/main/customer/customerTriage'
import {
  getClientDemandName
} from '@/api/modular/main/customer/customerConsultation'

export default {
  data(){
    return{
      row_record:{},
      spinning:false,
      indeterminate:false,
      receiveItemName:[], // 客户诉求
      ConsultationAppeal:[],
      sysUserArr:[], //咨询师
      sysUserArrAssistant:[], //咨询师
      value: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      disabled:true,
      visible: false,
      visibleTable: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      testArr:[],
      consultManId:""
    }
  },
  methods:{
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    add (row_record) {
      this.visible = true
      this.spinning = true
      this.row_record =row_record
      console.log('this.row_record',this.row_record)
      getClientDemandName().then(res => {
          this.ConsultationAppeal = res.rows     
          // this.spinning=false
          this.getList()
      })
    },
    getList(){
      // this.spinning = true
      // console.log(this.row_record) consultManId
      new Promise((resolve,reject)=>{

            const XCZXS = this.$options.filters['dictType']('dropdown_config','XCZXS')
            const XCZXZL = this.$options.filters['dictType']('dropdown_config','XCZXZL')
            //咨询师名单
          
            getZXS().then(res=>{
              this.sysUserArr = res.userList
              // this.consultManId=this.row_record.real_consult_man_id
                this.form.setFieldsValue({
                ['consultManId']: this.sysUserArr.filter(item=>{ return item.id == this.row_record.real_consult_man_id}).length == 0 ? undefined : this.row_record.real_consult_man_id
                // this.row_record.real_consult_man_id
              })
            })
            //咨询师助理
            dictTypeListForCode({code:XCZXZL}).then(res=>{
              this.sysUserArrAssistant = res.userList
            })

            setTimeout(()=>{
              resolve()
            },300)


      }).then(()=>{
           
              let sendData = {
                receiveId: this.row_record.tbReceiveId
              }
            receiveItem(sendData).then(res => {
              // this.receiveItemName=res.data.map((obj)=>{
              //   obj['label']=obj['label']
              //   obj['value']=obj['value']
              //   delete obj['receiveItemName']
              //   delete obj['receive_item_id']
              //   return obj
              // })
                this.spinning=false
              this.receiveItemName=res.data
              if(this.receiveItemName.length==1){ 
                if(res.data[0]){
                  
                  if(res.data[0].dept_id){
                      this.testArr=[res.data[0].dept_id,res.data[0].value||""]
                  }else{
                  
                     this.testArr=[]
                  
                  }        
                }else{
                  this.testArr=[]
                }


                // console.log("qitem",res.data[0].value)
              }else{
                  this.testArr=[]
              }
             
            })
    


      })


    
    },
    submit(){
      const { form: { validateFields } } = this
      
      if(!this.confirmLoading ){
         this.confirmLoading = true
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单校验未通过111')
          this.confirmLoading=false
          return
        }
        values.receiveId= this.row_record.tbReceiveId //接待表id
        values.clientId= this.row_record.clientId //客户id
        // if(!this.consultManId){
        //   this.$message.info("咨询师为空！")
        //   return 
        // }

        // values.consultManId=this.consultManId

        if(this.testArr.length == 0){
           values.quoteItemList=[]
        }else{
           values.quoteItemList=[this.testArr[this.testArr.length-1]]
        }
        
        console.log('表单校验通过222',values)
        triageAdd(values).then(res =>{
          console.log('提交结果为',res)
          if(res.code==200){
            this.$message.success({
              content:'分诊成功',
              duration:0.5,
              onClose:()=>{
                this.visible=false
                this.$parent.$refs.table.refresh()
              }
            })
          }else{
            this.$message.info({
              content:res.message,
              duration:0.5
            })
          }
        }).finally(()=>{
          this.confirmLoading = false
        })
      })
      }

     
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .ant-card-head{
  border-bottom: none;
}
/deep/ .ant-card-body{
   padding: 0 24px;
}
/deep/ .ant-card-head-title{
  font-weight: bold;
}
/deep/ .ant-page-header-heading-title{
  font-weight: normal;
  font-size: 16px;
}
.row-wrapper{
  margin-bottom: 30px;
}
.row-wrapper .title{
  font-weight: 800;
  color: #000000;
  font-size: 16px;
  margin-bottom: 16px;
}
.receive-item-class{
  width: 72px;
  height: 24px;
  font-size: 14px;
  text-align: center;
  line-height: 23px;
  background: #F5F5F5;
  border-radius: 2px;
  border: 1px solid #D9D9D9;
}
/deep/ .ant-checkbox-group{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
/deep/ .ant-checkbox-group .ant-checkbox-group-item{
  /*display: inline-block;*/
  padding: 9px 20px 9px 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  line-height: normal;
  height: 40px;
}
/deep/ .ant-checkbox-group{
  margin-bottom: 8px;
}
</style>